<template>
  <div class="app-container">
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;"/>
    <el-tree
      ref="subjectTree"
      :data="subjectList"
      :props="defaultProps"
      :filter-node-method="filterNode"
      class="filter-tree"
      default-expand-all/>
  </div>
</template>

<script>
  import subject from '@/api/edu/subject';

  export default {
    name: 'list',
    data() {
      return {
        filterText: '',
        subjectList: [],
        defaultProps: {
          children: 'children', // 节点的属性
          label: 'title' // 节点名称的属性
        }
      }
    },
    methods: {
      /**
       * 过滤的方法
       * @param val el-input中的值
       * @param data 每个节点的数据
       * @returns {boolean}
       */
      filterNode(val, data) {
        // 1.如果val没有值，那么默认不进行过滤，即返回所有
        if (!val) {
          return true
        }
        // 2.如果val有值，那么每个节点都用自己的label属性和val进行判断，看val在不在自己的label范围内
        return data.label.indexOf(val) !== -1
      },
      /**
       * 获取所有的课程分类，注意返回的是树形结构的数据
       */
      getAllSubject() {
        subject.getSubjectListPage().then(res => {
          this.subjectList = res.data.list;
        })
      }
    },
    watch: {
      filterText(val) {
        this.$refs.subjectTree.filter(val)
      }
    },
    created() {
      this.getAllSubject()
    }
  }
</script>

<style scoped>

</style>
